<? include "$_SERVER[DOCUMENT_ROOT]/_pilot/cmn/jsp/include/plt/html/inc_head.html"; ?>
<? include "$_SERVER[DOCUMENT_ROOT]/_pilot/cmn/jsp/include/plt/html/layout/layoutA_1.html"; ?>

<div class="service-con">
	<h5>탭과 컨텐츠 따로</h5>
	<div class="tab-type1">
		<ul class="js-tabA" title="탭1,탭2 항목 모음">
			<li><a href="#conA" class="js-tab">탭1</a></li>
			<li><a href="#conB" class="js-tab">탭2</a></li>
		</ul>
		<div class="con" id="conA">
			<h5 class="hidden">컨텐츠1 제목</h5>
			<div>
				컨텐츠 1 내용<br /><a href="#none">링크</a>
			</div>
		</div>
		<div class="con" id="conB">
			<h5 class="hidden">컨텐츠2 제목</h5>
			<div>
				컨텐츠 2 내용<br /><a href="#none">링크</a>
			</div>
		</div>
	</div>
	<div class="tab-type1">
		<ul class="js-tabA" title="탭1,탭2 항목 모음">
			<li><a href="#conA2" class="js-tab">탭1</a></li>
			<li><a href="#conB2" class="js-tab">탭2</a></li>
		</ul>
		<div class="con" id="conA2">
			<h5 class="hidden">컨텐츠1 제목</h5>
			<div>
				컨텐츠 1 내용<br /><a href="#none">링크</a>
			</div>
		</div>
		<div class="con" id="conB2">
			<h5 class="hidden">컨텐츠2 제목</h5>
			<div>
				컨텐츠 2 내용<br /><a href="#none">링크</a>
			</div>
		</div>
	</div>

	<br /><br /><br />

	<h5>탭과 컨텐츠 논리적</h5>
	<div class="tab-type2">
		<ul class="js-tabB" title="탭1,탭2 항목 모음">
			<li><a href="#none" class="js-tab tab1">탭1</a>
				<div class="con">
					<h5 class="hidden">컨텐츠1 제목</h5>
					<div>
						컨텐츠 1 내용<br /><a href="#none">링크</a>
					</div>
				</div>
			</li>
			<li><a href="#none" class="js-tab tab2">탭2</a>
				<div class="con">
					<h5 class="hidden">컨텐츠2 제목</h5>
					<div>
						컨텐츠 2 내용<br /><a href="#none">링크</a>
					</div>
				</div>
			</li>
		</ul>
	</div>
	<div class="tab-type2">
		<ul class="js-tabB" title="탭1,탭2 항목 모음">
			<li><a href="#none" class="js-tab tab1">탭1</a>
				<div class="con">
					<h5 class="hidden">컨텐츠1 제목</h5>
					<div>
						컨텐츠 1 내용<br /><a href="#none">링크</a>
					</div>
				</div>
			</li>
			<li><a href="#none" class="js-tab tab2">탭2</a>
				<div class="con">
					<h5 class="hidden">컨텐츠2 제목</h5>
					<div>
						컨텐츠 2 내용<br /><a href="#none">링크</a>
					</div>
				</div>
			</li>
		</ul>
	</div>
	
	<br /><br /><br />
	
	<h5>탭만 동작</h5>
	<div class="tab-type1">
		<ul class="js-tabC" title="탭1,탭2,탭3 항목 모음">
			<li><a href="#con" class="js-tab">탭1</a></li>
			<li><a href="#con" class="js-tab">탭2</a></li>
			<li><a href="#con" class="js-tab">탭3</a></li>
		</ul>
		<div class="con" id="con">
			컨텐츠 영역입니다<br />
			탭 클릭시 해당하는 컨텐츠로 채워지는 함수를 따로 적용합니다(개발)
		</div>
	</div>
</div><!-- //service-con -->

<? include "$_SERVER[DOCUMENT_ROOT]/_pilot/cmn/jsp/include/plt/html/layout/layoutA_2.html"; ?>